<template>
    <div class="login-container">
        <a-layout>
            <a-layout-header>
                <my-header></my-header>
            </a-layout-header>
            <a-layout-content>
                <div class="content">
                    <div class="login-form">
                        <a-card style="width: 600px; opacity: 1;">
                            <p>注册登录DSCN</p>
                            <a-form layout="vertical" :form="form" @submit="handleSubmit">
                                <a-form-item :validate-status="userNameError() ? 'error' : ''"
                                             :help="userNameError() || ''">
                                    <a-input
                                            v-decorator="[
          'userName',
          { rules: [{ required: true, message: 'Please input your username!' }] },
        ]"
                                            placeholder="Username"
                                    >
                                        <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)"/>
                                    </a-input>
                                </a-form-item>
                                <a-form-item :validate-status="passwordError() ? 'error' : ''"
                                             :help="passwordError() || ''">
                                    <a-input
                                            v-decorator="[
          'password',
          { rules: [{ required: true, message: 'Please input your Password!' }] },
        ]"
                                            type="password"
                                            placeholder="Password"

                                    >
                                        <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)"/>
                                    </a-input>
                                </a-form-item>
                                <a-form-item>
                                    <div class="captcha">
                                        <a-input style="float: left" ref="userNameInput" v-model="inputCode"
                                                 placeholder="请输入验证码">
                                            <a-icon slot="prefix" type="user"/>
                                        </a-input>
                                        <a-button @click="getCaptcha" style="float: right; margin-left: 15px;"
                                                  type="primary" ghost>{{ createCode }}
                                        </a-button>
                                    </div>
                                </a-form-item>
                                <a-form-item>
                                    <a-button type="primary" html-type="submit"
                                              :disabled="hasErrors(form.getFieldsError())">
                                        Log in
                                    </a-button>

                                    <a-button @click="toRegister" style="margin-left: 300px;" type="dashed"><span
                                            style="color: darkred">没有账号？请注册！</span>
                                    </a-button>
                                </a-form-item>
                                <a-form-item>
                                    <span style="margin-right: 20px">第三登录：</span>
                                    <a style="margin-right: 20px" href="https://api.weibo.com/oauth2/authorize?client_id=4268990700&redirect_uri=http://blog.com/oauth2&scope=all">
                                        <svg-icon icon="icondisanfangdenglu-weibo" size="30"></svg-icon>
                                    </a>
                                    <a style="margin-right: 20px" href="https://api.weibo.com/oauth2/authorize?client_id=4268990700&redirect_uri=http://blog.com/oauth2&scope=all">
                                        <svg-icon icon="icondisanfangdenglu_qq" size="30"></svg-icon>
                                    </a>
                                    <a style="margin-right: 20px" href="https://api.weibo.com/oauth2/authorize?client_id=4268990700&redirect_uri=http://blog.com/oauth2&scope=all">
                                        <svg-icon icon="icondisanfangdenglu-weixin-" size="30"></svg-icon>
                                    </a>
                                    <a style="margin-right: 20px" href="https://api.weibo.com/oauth2/authorize?client_id=4268990700&redirect_uri=http://blog.com/oauth2&scope=all">
                                        <svg-icon icon="iconzhifubao" size="30"></svg-icon>
                                    </a>
                                </a-form-item>
                            </a-form>
                        </a-card>
                    </div>
                </div>
            </a-layout-content>

            <a-layout-footer>
                <my-footer></my-footer>
            </a-layout-footer>
        </a-layout>
    </div>
</template>

<script>
    import MyHeader from "@/views/home/components/header/index";
    import MyFooter from "@/views/home/components/footer/index";
    import {login, getRandomSixNumber} from "@/api/user/user";
    import {getUserInfo} from "@/api/user/userInfo";

    function hasErrors(fieldsError) {
        return Object.keys(fieldsError).some(field => fieldsError[field]);
    }

    export default {
        name: "login",
        components: {MyFooter, MyHeader},

        data() {
            return {
                hasErrors,
                form: this.$form.createForm(this, {name: 'horizontal_login'}),
                inputCode: "",
                createCode: "",
            };
        },
        methods: {
            // Only show error after a field is touched.
            userNameError() {
                const {getFieldError, isFieldTouched} = this.form;
                return isFieldTouched('userName') && getFieldError('userName');
            },
            // Only show error after a field is touched.
            passwordError() {
                const {getFieldError, isFieldTouched} = this.form;
                return isFieldTouched('password') && getFieldError('password');
            },
            async handleSubmit(e) {
                e.preventDefault();
                this.form.validateFields(async (err, values) => {
                    if (!err) {
                        if (this.inputCode === this.createCode) {
                            let data = await login(values.userName, values.password);
                            console.log(data)
                            const user = await getUserInfo(data.id);
                            const userInfo = user.userInfo
                            this.$store.commit('UPDATE_USER_INFO', userInfo)
                            await this.$router.push('/')
                            this.$store.commit('UPDATE_USER', {
                                id: data.id
                            })
                        } else {
                            this.$message.error({content: '请输入正确的验证码！！', duration: 1.5});
                        }
                    } else {

                    }
                });

            },
            async init() {
                const data = await getRandomSixNumber()
                this.createCode = data
            },
            /* 重新生成验证码 */
            getCaptcha() {
                this.init()
            },
            /* 微博登录 */
            weiboLogin() {

            },
            toRegister() {
                this.$router.push({
                    name: 'register'
                })
            }
        },
        created() {
            this.init()
        }
    }
</script>

<style scoped>
    .login-container {

    }

    .content {
        padding-top: 200px;
        min-height: 900px;
        background: url("../assets/login-bg2.jpg") no-repeat 100%;
        opacity: 0.5;
    }

    .login-form {
        float: right;
        margin-right: 100px;
        opacity: 1;
    }

    .captcha {
        display: flex;
        justify-content: space-between;
    }
</style>
